<style>
.propro{
	margin: 30px;
	border-collapse: collapse;
	}
.propro td, .propro th{
	border: 1px solid #9FF;
	padding: 10px;
	}

#tjnewclass{
	width: 0px;
	height: 0px;
	overflow: hidden;
	position: relative;
	top: 200px;
	left: 300px;
	zoom: 1;
	z-index: 10;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	margin: 0;
	padding: 0;
	background-color: #FFF;
	border: 0px solid #CCC;
	box-shadow:3px 3px 3px #CCC;
	  _webkit-box-shadow:3px 3px 3px #CCC;
	  _moz-box-shadow:3px 3px 3px #CCC;
	}


</style>

<script>
$().ready(function() {


  
 //点击出现悬浮框 
 $('#addclass').click(function(){
	 
	 $('#tjnewclass').css(
	                 {'width': '300px',
	                  'height': '150px',
					  'border': '1px solid #CCC', });
	 
	 }); 
	 
 $('.editclass').click(function(){

	  var et1 = $(this).parents("div").children("h3").attr("name");  
	  var et2 = $(this).parents("div").children("h5").attr("name");  
	  
	  $("#newcname").val(et1);
	  $("#newcshoworder").val(et2);
	 
	 $('#tjnewclass').css(
	                 {'width': '300px',
	                  'height': '150px',
					  'border': '1px solid #CCC', });
	 
	
	 
	 });
	 
 //点击关闭悬浮框 
 $("#closetjnewclass").click(function(){ 
	 
	 $("#tjnewclass").css(
	                 {'width': '0',
	                  'height': '0',
					  'border': '0px solid #CCC', });  //没有用
	 
	 });	 
	
 

	 var str100; 
 //添加商品类别
 $("#newctijiao").click(function(){
      str100 = 'tjnewclass';
      var str11 = $("#newcname").val();
	  var str12 = $("#newcshoworder").val();
	
	 var str = str100 + "-" +str11 + "-" + str12;  //alert(str);
 
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    { //alert(1);
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        { //alert(2);
            document.getElementById("classres").innerHTML=xmlhttp.responseText; //alert(3);
        }
    }
    xmlhttp.open("GET","class.php?q="+str,true);
    xmlhttp.send();


 })
  
//编辑商品类别
 $("#newctijiao").click(function(){
          str100 = 'updateclass';
      var str11 = $("#newcname").val();
	  var str12 = $("#newcshoworder").val();
	  var str13 = $(this).attr("name"); 
	
	 var str = str100 + "-" +str11 + "-" + str12+ "-" + str13;  //alert(str);
 
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    { //alert(1);
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        { //alert(2);
            document.getElementById("classres").innerHTML=xmlhttp.responseText; //alert(3);
        }
    }
    xmlhttp.open("GET","class.php?q="+str,true);
    xmlhttp.send();


 })
 
//删除商品类别
 $(".delclass").click(function(){
          str100 = 'delclass';
      var et3 = $(this).parents("div").children("h5").attr("name"); alert(et3);
       var str = str100 + "-" +et3;
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    { //alert(1);
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        { //alert(2);
            document.getElementById("classres").innerHTML=xmlhttp.responseText; //alert(3);
        }
    }
    xmlhttp.open("GET","class.php?q="+str,true);
    xmlhttp.send();


 })


//删除商品
 $(".delpro").click(function(){
          str100 = 'delpro';
      var et4 = $(this).parents("tr").children("td").eq(0).attr("name"); 
       var str = str100 + "-" +et4
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    { //alert(1);
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        { //alert(2);
            document.getElementById("classres").innerHTML=xmlhttp.responseText; //alert(3);
        }
    }
    xmlhttp.open("GET","class.php?q="+str,true);
    xmlhttp.send();


 })


 });
 </script>

<?php
		        //循环输出menu1，并赋id给其超链接
		    $query1 = "select * from product_class where id > 1 order by show_order";
			$result1 = $aa->excu($query1);
		?>

<div>
<!--按销量输出各类商品-->

   <div><p style=" text-align: right;"><button id="addclass">添加商品类别</button></p>
        <div><p id="classres" style=" color: red; font-size: 10px;"></p></div>
   
        <div id="tjnewclass" ><div style=" padding: 30px;">
            <p>类别名称<input type="text" id="newcname" placeholder="请输入新类别名称"></p>
            <p>显示顺序<input type="text" id="newcshoworder" placeholder="请输入新类别显示顺序"></p>
            <p><button id="newctijiao">提交</button><button id="closetjnewclass"><a href=""><span><strong>关　闭</strong></span></a></button></p>
        </div></div>
        
        
   </div>
                
          <?php
		        //循环输出menu1，并赋id给其超链接
		    $query1 = "select * from product_class where id > 1 order by show_order";
			$result1 = $aa->excu($query1);
			while ($product_class = mysqli_fetch_array($result1, MYSQLI_ASSOC))	{	

		?>
             <div>   
                
                <h3 name="<?php echo $product_class['class_name']; ?>"><?php echo $product_class['class_name']; ?></h3> <h5 name="<?php echo $product_class['id']; ?>" style="display: none;"></h5>         
                <p><button name="<?php echo $product_class['id']; ?>" class="editclass">编辑</button><button class="delclass">删除</button></p>
                <table class="propro">
                        <tr>
                            <th>编号</th><th>商品名</th><th>图片</th><th>价格</th><th>销量</th><th>操作</th>
                        </tr>
                <?php
		        
		            $query2 = "select * from product_info where class_id = '".$product_class['id']."' order by id";
			        $result2 = $aa->excu($query2);
			        while ($row = mysqli_fetch_array($result2, MYSQLI_ASSOC))	{	

		        ?>

               
                        
                        <tr>
                            <td name="<?php echo $row['id']; ?>"><?php echo $row['id']; ?></td><td><?php echo $row['name']; ?></td>
                            <td><?php $img = $row['imgsrc']; $img = explode("#", $img);?>
                                <img src="../<?php echo $img[0]; ?>" style=" width: 30px; height: 30px;"/></td>
                            <td><?php echo $row['price']; ?></td><td><?php echo $row['sales_volume']; ?></td>
                            <td><a href="index.php?rnum=2&proid=<?php echo $row['id']; ?>" ><button class="updatepro">编辑</button></a><button class="delpro">删除</button></td>
                        </tr>
                        
                      
               
               
                 <?php  }	?>
                 </table>
             </div>
         <?php  }	?>










</div>